<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickshape.cpp -->
  <title>ShapePath QML 类型 | Qt Quick 5.12.3</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.12</a></td><td ><a href="qtquick-index.html">Qt Quick 模块</a></td><td ><a href="qtquick-qmlmodule.html">QML类型</a></td><td >ShapePath QML 类型</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.3 参考指南</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">目录</a></h3>
<ul>
<li class="level1"><a href="#properties">属性</a></li>
<li class="level1"><a href="#details">详细信息</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">ShapePath QML 类型</h1>
<span class="subtitle"></span>
<!-- $$$ShapePath-brief -->
<p>Describes a Path and associated properties for stroking and filling. <a href="#details">更多...</a></p>
<!-- @@@ShapePath -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> 导入语句：</td><td class="memItemRight bottomAlign"> import QtQuick.Shapes 1.12</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Since:</td><td class="memItemRight bottomAlign">  Qt 5.10</td></tr><tr><td class="memItemLeft rightAlign topAlign">继承自：</td><td class="memItemRight bottomAlign"> <p><a href="qml-qtquick-path.html">Path</a></p>
</td></tr></table></div><ul>
<li><a href="qml-qtquick-shapes-shapepath-members.html">所有成员的列表，包括继承成员</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">属性</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#capStyle-prop">capStyle</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#dashOffset-prop">dashOffset</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#dashPattern-prop">dashPattern</a></b></b> : list&lt;real&gt;</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#fillColor-prop">fillColor</a></b></b> : color</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#fillGradient-prop">fillGradient</a></b></b> : ShapeGradient</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#fillRule-prop">fillRule</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#joinStyle-prop">joinStyle</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#miterLimit-prop">miterLimit</a></b></b> : int</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#strokeColor-prop">strokeColor</a></b></b> : color</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#strokeStyle-prop">strokeStyle</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-shapes-shapepath.html#strokeWidth-prop">strokeWidth</a></b></b> : color</li>
</ul>
<!-- $$$ShapePath-description -->
<a name="details"></a>
<h2 id="details">详细信息</h2>
<p>A <a href="qml-qtquick-shapes-shape.html">Shape</a> contains one or more <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a> elements. At least one <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a> is necessary in order to have a Shape output anything visible. A <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a> itself is a <a href="qml-qtquick-path.html">Path</a> with additional properties describing the stroking and filling parameters, such as the stroke width and color, the fill color or gradient, join and cap styles, and so on. As with ordinary <a href="qml-qtquick-path.html">Path</a> objects, <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a> also contains a list of path elements like <a href="qml-qtquick-pathmove.html">PathMove</a>, <a href="qml-qtquick-pathline.html">PathLine</a>, <a href="qml-qtquick-pathcubic.html">PathCubic</a>, <a href="qml-qtquick-pathquad.html">PathQuad</a>, <a href="qml-qtquick-patharc.html">PathArc</a>, together with a starting position.</p>
<p>Any property changes in these data sets will be bubble up and change the output of the Shape. This means that it is simple and easy to change, or even animate, the starting and ending position, control points, or any stroke or fill parameters using the usual QML bindings and animation types like <a href="qml-qtquick-numberanimation.html">NumberAnimation</a>.</p>
<p>In the following example the line join style changes automatically based on the value of joinStyleIndex:</p>
<pre class="qml">

  <span class="type"><a href="qml-qtquick-shapes-shapepath.html">ShapePath</a></span> {
      <span class="name">strokeColor</span>: <span class="string">&quot;black&quot;</span>
      <span class="name">strokeWidth</span>: <span class="number">16</span>
      <span class="name">fillColor</span>: <span class="string">&quot;transparent&quot;</span>
      <span class="name">capStyle</span>: <span class="name">ShapePath</span>.<span class="name">RoundCap</span>

      property <span class="type"><a href="../qtqml/qml-int.html">int</a></span> <span class="name">joinStyleIndex</span>: <span class="number">0</span>

      property <span class="type"><a href="../qtqml/qml-variant.html">variant</a></span> <span class="name">styles</span>: [
          <span class="name">ShapePath</span>.<span class="name">BevelJoin</span>,
          <span class="name">ShapePath</span>.<span class="name">MiterJoin</span>,
          <span class="name">ShapePath</span>.<span class="name">RoundJoin</span>
      ]

      <span class="name">joinStyle</span>: <span class="name">styles</span>[<span class="name">joinStyleIndex</span>]

      <span class="name">startX</span>: <span class="number">30</span>
      <span class="name">startY</span>: <span class="number">30</span>
      <span class="type"><a href="qml-qtquick-pathline.html">PathLine</a></span> { <span class="name">x</span>: <span class="number">100</span>; <span class="name">y</span>: <span class="number">100</span> }
      <span class="type"><a href="qml-qtquick-pathline.html">PathLine</a></span> { <span class="name">x</span>: <span class="number">30</span>; <span class="name">y</span>: <span class="number">100</span> }
  }

</pre>
<p>Once associated with a Shape, here is the output with a joinStyleIndex of 2 (<a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.RoundJoin):</p>
<p class="centerAlign"><img src="images/visualpath-code-example.png" alt="" /></p><p><b>See also </b><a href="qtquick-shapes-example.html">Qt Quick 示例 - Shapes</a> and <a href="qml-qtquick-shapes-shape.html">Shape</a>.</p>
<!-- @@@ShapePath -->
<h2>属性文档</h2>
<!-- $$$capStyle -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="capStyle-prop">
<td class="tblQmlPropNode"><p>
<a name="capStyle-prop"></a><span class="name">capStyle</span> : <span class="type"><a href="../qtqml/qml-enumeration.html">enumeration</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property defines how the end points of lines are drawn. The default value is <code>ShapePath.SquareCap</code>.</p>
<div class="table"><table class="valuelist"><tr valign="top" class="odd"><th class="tblConst">Constant</th><th class="tbldscr">Description</th></tr>
<tr><td class="topAlign"><code>ShapePath.FlatCap</code></td><td class="topAlign">A square line end that does not cover the end point of the line.</td></tr>
<tr><td class="topAlign"><code>ShapePath.SquareCap</code></td><td class="topAlign">A square line end that covers the end point and extends beyond it by half the line width.</td></tr>
<tr><td class="topAlign"><code>ShapePath.RoundCap</code></td><td class="topAlign">A rounded line end.</td></tr>
</table></div>
</div></div><!-- @@@capStyle -->
<br/>
<!-- $$$dashOffset -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="dashOffset-prop">
<td class="tblQmlPropNode"><p>
<a name="dashOffset-prop"></a><span class="name">dashOffset</span> : <span class="type"><a href="../qtqml/qml-real.html">real</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property defines the starting point on the dash pattern, measured in units used to specify the dash pattern.</p>
<p>The default value is 0.</p>
<p><b>请参考 </b><a href="../qtgui/qpen.html#setDashOffset">QPen::setDashOffset()</a>。</p>
</div></div><!-- @@@dashOffset -->
<br/>
<!-- $$$dashPattern -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="dashPattern-prop">
<td class="tblQmlPropNode"><p>
<a name="dashPattern-prop"></a><span class="name">dashPattern</span> : <span class="type"><a href="../qtqml/qml-list.html">list</a></span>&lt;<span class="type"><a href="../qtqml/qml-real.html">real</a></span>&gt;</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property defines the dash pattern when <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.<a href="qml-qtquick-shapes-shapepath.html#strokeStyle-prop">strokeStyle</a> is set to <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.DashLine. The pattern must be specified as an even number of positive entries where the entries 1, 3, 5..&#x2e; are the dashes and 2, 4, 6..&#x2e; are the spaces. The pattern is specified in units of the pen's width.</p>
<p>The default value is (4, 2), meaning a dash of 4 * <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.<a href="qml-qtquick-shapes-shapepath.html#strokeWidth-prop">strokeWidth</a> pixels followed by a space of 2 * <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.<a href="qml-qtquick-shapes-shapepath.html#strokeWidth-prop">strokeWidth</a> pixels.</p>
<p><b>请参考 </b><a href="../qtgui/qpen.html#setDashPattern">QPen::setDashPattern()</a>。</p>
</div></div><!-- @@@dashPattern -->
<br/>
<!-- $$$fillColor -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="fillColor-prop">
<td class="tblQmlPropNode"><p>
<a name="fillColor-prop"></a><span class="name">fillColor</span> : <span class="type"><a href="qml-color.html">color</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the fill color.</p>
<p>When set to <code>transparent</code>, no filling occurs.</p>
<p>The default value is <code>white</code>.</p>
</div></div><!-- @@@fillColor -->
<br/>
<!-- $$$fillGradient -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="fillGradient-prop">
<td class="tblQmlPropNode"><p>
<a name="fillGradient-prop"></a><span class="name">fillGradient</span> : <span class="type"><a href="qml-qtquick-shapes-shapegradient.html">ShapeGradient</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property defines the fill gradient. By default no gradient is enabled and the value is <code>null</code>. In this case the fill uses a solid color based on the value of <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.<a href="qml-qtquick-shapes-shapepath.html#fillColor-prop">fillColor</a>.</p>
<p>When set, <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.<a href="qml-qtquick-shapes-shapepath.html#fillColor-prop">fillColor</a> is ignored and filling is done using one of the <a href="qml-qtquick-shapes-shapegradient.html">ShapeGradient</a> subtypes.</p>
<p><b>Note: </b>The Gradient type cannot be used here. Rather, prefer using one of the advanced subtypes, like <a href="qml-qtquick-shapes-lineargradient.html">LinearGradient</a>.</p></div></div><!-- @@@fillGradient -->
<br/>
<!-- $$$fillRule -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="fillRule-prop">
<td class="tblQmlPropNode"><p>
<a name="fillRule-prop"></a><span class="name">fillRule</span> : <span class="type"><a href="../qtqml/qml-enumeration.html">enumeration</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the fill rule. The default value is <code>ShapePath.OddEvenFill</code>. For an explanation on fill rules, see <a href="../qtgui/qpainterpath.html#setFillRule">QPainterPath::setFillRule()</a>.</p>
<div class="table"><table class="valuelist"><tr valign="top" class="odd"><th class="tblConst">Constant</th><th class="tbldscr">Description</th></tr>
<tr><td class="topAlign"><code>ShapePath.OddEvenFill</code></td><td class="topAlign">Odd-even fill rule.</td></tr>
<tr><td class="topAlign"><code>ShapePath.WindingFill</code></td><td class="topAlign">Non-zero winding fill rule.</td></tr>
</table></div>
</div></div><!-- @@@fillRule -->
<br/>
<!-- $$$joinStyle -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="joinStyle-prop">
<td class="tblQmlPropNode"><p>
<a name="joinStyle-prop"></a><span class="name">joinStyle</span> : <span class="type"><a href="../qtqml/qml-enumeration.html">enumeration</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property defines how joins between two connected lines are drawn. The default value is <code>ShapePath.BevelJoin</code>.</p>
<div class="table"><table class="valuelist"><tr valign="top" class="odd"><th class="tblConst">Constant</th><th class="tbldscr">Description</th></tr>
<tr><td class="topAlign"><code>ShapePath.MiterJoin</code></td><td class="topAlign">The outer edges of the lines are extended to meet at an angle, and this area is filled.</td></tr>
<tr><td class="topAlign"><code>ShapePath.BevelJoin</code></td><td class="topAlign">The triangular notch between the two lines is filled.</td></tr>
<tr><td class="topAlign"><code>ShapePath.RoundJoin</code></td><td class="topAlign">A circular arc between the two lines is filled.</td></tr>
</table></div>
</div></div><!-- @@@joinStyle -->
<br/>
<!-- $$$miterLimit -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="miterLimit-prop">
<td class="tblQmlPropNode"><p>
<a name="miterLimit-prop"></a><span class="name">miterLimit</span> : <span class="type"><a href="../qtqml/qml-int.html">int</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>When <a href="qml-qtquick-shapes-shapepath.html#joinStyle-prop">joinStyle</a> is set to <code>ShapePath.MiterJoin</code>, this property specifies how far the miter join can extend from the join point.</p>
<p>The default value is 2.</p>
</div></div><!-- @@@miterLimit -->
<br/>
<!-- $$$strokeColor -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="strokeColor-prop">
<td class="tblQmlPropNode"><p>
<a name="strokeColor-prop"></a><span class="name">strokeColor</span> : <span class="type"><a href="qml-color.html">color</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the stroking color.</p>
<p>When set to <code>transparent</code>, no stroking occurs.</p>
<p>The default value is <code>white</code>.</p>
</div></div><!-- @@@strokeColor -->
<br/>
<!-- $$$strokeStyle -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="strokeStyle-prop">
<td class="tblQmlPropNode"><p>
<a name="strokeStyle-prop"></a><span class="name">strokeStyle</span> : <span class="type"><a href="../qtqml/qml-enumeration.html">enumeration</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property defines the style of stroking. The default value is <a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.SolidLine.</p>
<ul>
<li><a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.SolidLine - A plain line.</li>
<li><a href="qml-qtquick-shapes-shapepath.html">ShapePath</a>.DashLine - Dashes separated by a few pixels.</li>
</ul>
</div></div><!-- @@@strokeStyle -->
<br/>
<!-- $$$strokeWidth -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="strokeWidth-prop">
<td class="tblQmlPropNode"><p>
<a name="strokeWidth-prop"></a><span class="name">strokeWidth</span> : <span class="type"><a href="qml-color.html">color</a></span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property holds the stroke width.</p>
<p>When set to a negative value, no stroking occurs.</p>
<p>The default value is 1.</p>
</div></div><!-- @@@strokeWidth -->
<br/>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br/>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br/>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
